<template>
  <div class="header">
    <div class="header-left">
      <div class="left-arrow"
           @click="onClickBack"
           v-show="showBack">
        <i class="arrow"
           :style="{borderColor: titleColor}"></i>
      </div>
      <slot name="left"></slot>
    </div>
    <h1 class="header-title"
        :style="{color: titleColor}">
      {{title}}
    </h1>
    <div class="header-right">
      <slot name="right"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Header',
  props: {
    title: {},
    showBack: {
      type: Boolean,
      default: true
    },
    titleColor: {
      type: String,
      default: '#000'
    }
  },
  data () {
    return {
      // blackBack: require("Assets/img/blackBack.png"),
      // whiteBack: require("Assets/img/whiteBack.png")
    }
  },
  methods: {
    onClickBack () {
      this.$router ? this.$router.back() : window.history.back()
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
@import '../../assets/style/theme.less';
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: .025rem 0;
  box-sizing: border-box;
  background-color: @header-background-color;
  border-bottom: .0125rem solid @header-border-color;
}
.header .header-title {
  line-height: .5rem;
  text-align: center;
  font-size: .2rem;
  font-weight: 400;
  color: @header-title-color;
}
.header-title-area,
.header .header-title {
  margin: 0 1.1rem;
  height: .5rem;
  width: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.header .header-title > span {
  display: inline-block;
}
.header .header-left,
.header .header-right {
  position: absolute;
  top: .175rem;
  display: block;
  font-size: .175rem;
  line-height: .2625rem;
  color: @header-text-color;
}
.header .header-left a,
.header .header-left button,
.header .header-right a,
.header .header-right button {
  float: left;
  margin-right: .1rem;
  color: @header-text-color;
}
.header .header-left a:active,
.header .header-left button:active,
.header .header-right a:active,
.header .header-right button:active {
  opacity: 0.5;
}
.header .header-left {
  left: .225rem;
}
.header .header-left .header-back {
  padding-left: .2rem;
}
.header .header-left .left-arrow {
  position: absolute;
  width: .375rem;
  height: .375rem;
  top: -.0625rem;
  left: -.1125rem;
}

.header .header-left .left-arrow .arrow {
  position: absolute;
  width: .15rem;
  height: .15rem;
  border: .025rem solid #000;
  border-width: .025rem 0 0 .025rem;
  -webkit-transform: rotate(315deg);
  transform: rotate(315deg);
  top: .1rem;
  left: .0875rem;
}

.header .header-right {
  right: .1875rem;
}
.header .header-right a,
.header .header-right button {
  margin-left: .1rem;
  margin-right: 0;
}
.header .header-right .header-more:after {
  content: '\2022\0020\2022\0020\2022\0020';
  font-size: .2rem;
}
.header-fade-in-right-enter-active {
  animation: fadeinR 0.5s;
}
.header-fade-in-left-enter-active {
  animation: fadeinL 0.5s;
}
@keyframes fadeinR {
  0% {
    opacity: 0;
    transform: translateX(1.875rem);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fadeinL {
  0% {
    opacity: 0;
    transform: translateX(-1.875rem);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
</style>
